import React, { useState, useEffect } from "react";

// 自动生成100条mock数据
const names = [
  "樊学慧",
  "孙红凯",
  "张汇",
  "顾东心",
  "周海波",
  "王雪",
  "陈欣",
  "李艳",
  "王英天",
  "赵小明",
];
const mockData = Array.from({ length: 100 }).map((_, i) => ({
  name: names[i % names.length],
  id: "A123456",
  dept: "人力资源部",
  job: "数据分析师",
  date: "2025年3月10日",
  week: "星期一",
  group: "默认班次",
  result: i % 9 === 3 ? "异常" : "正常",
  checkIn: i % 9 === 3 ? "22:09" : `0${(i % 9) + 5}:0${i % 6}`,
  checkInStatus: i % 9 === 3 ? "异常" : "正常",
}));

// 月报mock数据
const monthColumns = [
  "姓名",
  "员工号",
  "部门",
  "岗位",
  "考勤组",
  "应出勤天数",
  "实出勤天数",
  "迟到时长",
  "迟到次数",
  "早退时长",
  "早退次数",
];
const monthData = Array.from({ length: 100 }).map((_, i) => ({
  name: names[i % names.length],
  id: "A123456",
  dept: "人力资源部",
  job: "数据分析师",
  group: "默认考勤组",
  shouldDays: 22,
  realDays: 22 - (i % 5),
  lateMins: i % 10 === 2 ? 10 : 0,
  lateCount: i % 10 === 2 ? 1 : 0,
  earlyMins: 0,
  earlyCount: 0,
}));

// 出勤记录mock数据
const recordColumns = [
  "姓名",
  "员工号",
  "部门",
  "日期",
  "星期",
  "上班打卡时间",
  "上班打卡结果",
  "下班打卡时间",
  "下班打卡结果",
  "下班",
  "操作",
];
const recordData = Array.from({ length: 100 }).map((_, i) => ({
  name: names[i % names.length],
  id: "A123456",
  dept: "人力资源部",
  date: "2025年3月10日",
  week: "星期一",
  checkIn: i % 9 === 3 ? "22:09" : `0${(i % 9) + 5}:0${i % 6}`,
  checkInStatus: i % 9 === 3 ? "异常" : "正常",
  checkOut: i % 9 === 3 ? "21:08" : `0${(i % 9) + 13}:0${i % 6}`,
  checkOutStatus: i % 9 === 3 ? "异常" : "正常",
  shift: "正常",
}));

// 排班管理mock数据
const scheduleColumns = ["姓名", "员工号", "部门"].concat(
  Array.from({ length: 10 }).map((_, i) => {
    const day = i + 1;
    const week = ["六", "日", "一", "二", "三", "四", "五", "六", "日", "一"][
      i
    ];
    return `${week}${day}`;
  })
);
const scheduleData = Array.from({ length: 100 }).map((_, i) => {
  const row = {
    name: names[i % names.length],
    id: "A123456",
    dept: "人力资源部",
  };
  for (let d = 1; d <= 10; d++) {
    // 周六/日为休息，其他为班次
    const weekIdx = (d - 1) % 7;
    if (weekIdx === 0 || weekIdx === 6) {
      row[`d${d}`] = "休息";
    } else {
      row[`d${d}`] = "默认班次";
    }
  }
  return row;
});

// 假期余额mock数据
const leaveColumns = [
  "姓名",
  "手机号",
  "部门",
  "年度",
  "剩余年假(天)",
  "剩余司龄假(天)",
  "剩余带薪病假(天)",
  "剩余婚假(天)",
  "剩余产假(天)",
  "剩余丧假(天)",
  "操作",
];
const leaveData = Array.from({ length: 100 }).map((_, i) => ({
  name: names[i % names.length],
  phone: `19${Math.floor(100000000 + Math.random() * 900000000)}`,
  dept: "人力资源部",
  year: 2025,
  annual: 15 - (i % 8) * 2,
  seniority: 3 - (i % 4),
  sick: 5,
  marriage: "未设置",
  maternity: "未设置",
  funeral: "未设",
}));

// 休假记录mock数据
const holidayColumns = [
  "申请人",
  "手机号",
  "部门",
  "发起人",
  "假期类型",
  "请假时长",
  "开始时间",
  "结束时间",
  "请假事由",
  "审批",
  "操作",
];
const holidayData = Array.from({ length: 100 }).map((_, i) => ({
  name: names[i % names.length],
  phone: `19${Math.floor(100000000 + Math.random() * 900000000)}`,
  dept: "人力资源部",
  sponsor: names[i % names.length],
  type: "年假",
  duration: 1 + (i % 3),
  start: `2024-08-0${(i % 9) + 1} 20:41`,
  end: `2024-08-0${(i % 9) + 1} 20:41`,
  reason: "因身体不适需要请假",
  status: "通过",
}));

// 假期类型mock数据
const typeColumns = [
  "排序",
  "假期类型",
  "休假单位",
  "休假额度",
  "适用范围",
  "是否带薪",
  "负责人",
  "操作",
];
const typeData = [
  {
    type: "年假",
    unit: "半天",
    limit: "限额",
    scope: "全公司",
    paid: "是",
    owner: "彤慧",
  },
  {
    type: "事假",
    unit: "小时",
    limit: "不限额",
    scope: "全公司",
    paid: "否",
    owner: "彤慧",
  },
  {
    type: "病假",
    unit: "半天",
    limit: "不限额",
    scope: "全公司",
    paid: "是",
    owner: "彤慧",
  },
  {
    type: "调休假",
    unit: "小时",
    limit: "限额",
    scope: "全公司",
    paid: "是",
    owner: "彤慧",
  },
  {
    type: "婚假",
    unit: "天",
    limit: "不限额",
    scope: "全公司",
    paid: "是",
    owner: "彤慧",
  },
  {
    type: "产假",
    unit: "天",
    limit: "不限额",
    scope: "全公司",
    paid: "是",
    owner: "彤慧",
  },
  {
    type: "陪产假",
    unit: "天",
    limit: "不限额",
    scope: "全公司",
    paid: "是",
    owner: "彤慧",
  },
  {
    type: "丧假",
    unit: "天",
    limit: "不限额",
    scope: "全公司",
    paid: "是",
    owner: "彤慧",
  },
  {
    type: "哺乳假",
    unit: "分钟",
    limit: "不限额",
    scope: "全公司",
    paid: "是",
    owner: "彤慧",
  },
  {
    type: "生日假",
    unit: "天",
    limit: "限额",
    scope: "全公司",
    paid: "是",
    owner: "彤慧",
  },
];
const typeData100 = Array.from({ length: 100 }).map((_, i) => ({
  ...typeData[i % typeData.length],
  sort: i + 1,
}));

// 加班记录mock数据
const overtimeColumns = [
  "申请人",
  "手机号",
  "部门",
  "发起人",
  "加班日期",
  "申请时长",
  "开始时间",
  "结束时间",
  "加班类型",
  "补偿方式",
  "操作",
];
const overtimeData = Array.from({ length: 100 }).map((_, i) => ({
  name: names[i % names.length],
  phone: `19${Math.floor(100000000 + Math.random() * 900000000)}`,
  dept: "人力资源部",
  sponsor: names[i % names.length],
  date: `2024-08-0${(i % 9) + 1}`,
  duration: 1 + (i % 4),
  start: `2024-08-0${(i % 9) + 1} 20:41`,
  end: `2024-08-0${(i % 9) + 1} 20:41`,
  type: ["工作日加班", "休息日加班", "节假日加班"][i % 3],
  compensation: ["转为调休", "记为加班费", "无补偿"][i % 3],
}));

// 班次设置mock数据
const shiftColumns = [
  "班次名称",
  "考勤时间",
  "出勤时长",
  "创建人",
  "创建时间",
  "操作",
];
const shiftData = [
  {
    name: "office 办公班次",
    times: ["09:00 ~ 18:00"],
    duration: 8,
    creator: "傅彤滢",
    createTime: "2024-07-06 21:42",
  },
  {
    name: "包装组班次",
    times: ["10:00 ~ 20:00", "21:00 ~ 23:00"],
    duration: 8,
    creator: "傅彤滢",
    createTime: "2024-01-03 20:50",
  },
  {
    name: "车间（白班）班次",
    times: ["08:00 ~ 16:00"],
    duration: 8,
    creator: "傅彤滢",
    createTime: "2024-06-03 09:54",
  },
  {
    name: "车间（中班）班次",
    times: ["16:00 ~ 00:00"],
    duration: 8,
    creator: "傅彤滢",
    createTime: "2024-03-25 14:33",
  },
  {
    name: "车间（夜班）班次",
    times: ["00:00 ~ 08:00"],
    duration: 8,
    creator: "傅彤滢",
    createTime: "2025-11-23 19:32",
  },
  {
    name: "默认班次",
    times: ["09:00 ~ 18:00"],
    duration: 8,
    creator: "傅彤滢",
    createTime: "2025-11-23 19:32",
  },
];
const shiftData100 = Array.from({ length: 100 }).map((_, i) => {
  const base = shiftData[i % shiftData.length];
  return {
    ...base,
    createTime: base.createTime.replace(/\d{4}/, 2024 + (i % 3)),
  };
});

// 考勤地点mock数据
const locationColumns = [
  "考勤地点名称",
  "考勤方式",
  "GPS打卡地点",
  "GPS有效范围",
  "打卡Wi-Fi名称",
  "MAC地址",
  "创建人",
  "创建",
  "操作",
];
const locationData = [
  {
    name: "考勤地点1",
    type: "GPS打卡",
    gps: "北京国贸大厦A座",
    range: "300米",
    wifi: "-",
    mac: "-",
    creator: "彤慧",
    create: "2025",
  },
  {
    name: "考勤地点2",
    type: "GPS打卡",
    gps: "北京国贸大厦B座",
    range: "300米",
    wifi: "-",
    mac: "-",
    creator: "彤慧",
    create: "2025",
  },
  {
    name: "考勤地点3",
    type: "GPS打卡",
    gps: "北京国贸大厦C座",
    range: "300米",
    wifi: "-",
    mac: "-",
    creator: "彤慧",
    create: "2025",
  },
  {
    name: "考勤地点4",
    type: "Wi-Fi打卡",
    gps: "-",
    range: "-",
    wifi: "WiFi名称-1",
    mac: "00:1A:2B:3C:4D:5E",
    creator: "彤慧",
    create: "2025",
  },
  {
    name: "考勤地点5",
    type: "Wi-Fi打卡",
    gps: "-",
    range: "-",
    wifi: "WiFi名称-2",
    mac: "00:1A:2B:3C:4D:5E",
    creator: "彤慧",
    create: "2024",
  },
  {
    name: "考勤地点6",
    type: "Wi-Fi打卡",
    gps: "-",
    range: "-",
    wifi: "WiFi名称-3",
    mac: "00:1A:2B:3C:4D:5E",
    creator: "彤慧",
    create: "2024",
  },
  {
    name: "考勤地点7",
    type: "Wi-Fi打卡",
    gps: "-",
    range: "-",
    wifi: "WiFi名称-4",
    mac: "00:1A:2B:3C:4D:5E",
    creator: "彤慧",
    create: "2025",
  },
  {
    name: "考勤地点8",
    type: "GPS打卡",
    gps: "不限额",
    range: "-",
    wifi: "-",
    mac: "-",
    creator: "彤慧",
    create: "2024",
  },
  {
    name: "考勤地点9",
    type: "GPS打卡",
    gps: "不限额",
    range: "-",
    wifi: "-",
    mac: "-",
    creator: "彤慧",
    create: "2025",
  },
  {
    name: "考勤地点10",
    type: "GPS打卡",
    gps: "限额",
    range: "-",
    wifi: "-",
    mac: "-",
    creator: "彤慧",
    create: "2025",
  },
];
const locationData100 = Array.from({ length: 100 }).map((_, i) => ({
  ...locationData[i % locationData.length],
  create: 2024 + (i % 2),
}));

const columns = [
  "姓名",
  "员工号",
  "部门",
  "岗位",
  "日期",
  "星期",
  "班次名称",
  "考勤结果",
  "上班打卡时间",
  "上班打卡结果",
];

function Table({ data }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  if (isMobile) {
    return (
      <div style={{ 
        display: "flex", 
        flexDirection: "column",
        gap: 16
      }}>
        {data.map((row, idx) => (
          <div
            key={idx}
            style={{
              background: "#fff",
              border: "1px solid #f0f0f0",
              borderRadius: 8,
              padding: "16px 20px",
            }}
          >
            <div style={{
              display: "flex",
              flexDirection: "column",
              gap: 12
            }}>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8
              }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: "#1f2329" }}>
                  {row.name}
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>员工号:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.id}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>部门:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.dept}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>岗位:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.job}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8,
                marginTop: 4
              }}>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>日期:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.date}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>星期:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.week}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>班次名称:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.group}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>考勤结果:</span>
                  <span style={{ 
                    color: row.result === "正常" ? "#00b42a" : "#f53f3f", 
                    fontSize: 14,
                    background: row.result === "正常" ? "#e8ffea" : "#fff0f0",
                    padding: "2px 8px",
                    borderRadius: 4
                  }}>{row.result}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>上班打卡时间:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.checkIn}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>上班打卡结果:</span>
                  <span style={{ 
                    color: row.checkInStatus === "正常" ? "#00b42a" : "#f53f3f", 
                    fontSize: 14,
                    background: row.checkInStatus === "正常" ? "#e8ffea" : "#fff0f0",
                    padding: "2px 8px",
                    borderRadius: 4
                  }}>{row.checkInStatus}</span>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <table
      style={{
        width: "100%",
        borderCollapse: "collapse",
        background: "#fff",
        fontSize: 14,
      }}
    >
      <thead>
        <tr style={{ background: "#f7f8fa", height: 40 }}>
          {columns.map((col) => (
            <th
              key={col}
              style={{ border: "1px solid #f0f0f0", fontWeight: 500 }}
            >
              {col}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, idx) => (
          <tr
            key={idx}
            style={{
              textAlign: "center",
              height: 40,
              background: idx % 2 === 0 ? "#fff" : "#fafbfc",
            }}
          >
            <td
              style={{
                border: "1px solid #f0f0f0",
                color: idx === 0 ? "#fa541c" : undefined,
                fontWeight: idx === 0 ? 500 : undefined,
              }}
            >
              {row.name}
            </td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.id}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.dept}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.job}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.date}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.week}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.group}</td>
            <td
              style={{
                border: "1px solid #f0f0f0",
                color: row.result === "异常" ? "#faad14" : undefined,
              }}
            >
              {row.result}
            </td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.checkIn}</td>
            <td
              style={{
                border: "1px solid #f0f0f0",
                color: row.checkInStatus === "异常" ? "#faad14" : undefined,
              }}
            >
              {row.checkInStatus}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function MonthTable({ data }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  if (isMobile) {
    return (
      <div style={{ 
        display: "flex", 
        flexDirection: "column",
        gap: 16
      }}>
        {data.map((row, idx) => (
          <div
            key={idx}
            style={{
              background: "#fff",
              border: "1px solid #f0f0f0",
              borderRadius: 8,
              padding: "16px 20px",
            }}
          >
            <div style={{
              display: "flex",
              flexDirection: "column",
              gap: 12
            }}>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8
              }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: "#1f2329" }}>
                  {row.name}
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>员工号:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.id}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>部门:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.dept}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>岗位:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.job}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8,
                marginTop: 4
              }}>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>考勤组:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.group}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>应出勤天数:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.shouldDays}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>实出勤天数:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.realDays}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>迟到时长:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.lateMins}分钟</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>迟到次数:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.lateCount}次</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>早退时长:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.earlyMins}分钟</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>早退次数:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.earlyCount}次</span>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <table
      style={{
        width: "100%",
        borderCollapse: "collapse",
        background: "#fff",
        fontSize: 14,
      }}
    >
      <thead>
        <tr style={{ background: "#f7f8fa", height: 40 }}>
          {monthColumns.map((col) => (
            <th
              key={col}
              style={{ border: "1px solid #f0f0f0", fontWeight: 500 }}
            >
              {col}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, idx) => (
          <tr
            key={idx}
            style={{
              textAlign: "center",
              height: 40,
              background: idx % 2 === 1 ? "#f7f8fa" : "#fff",
            }}
          >
            <td style={{ border: "1px solid #f0f0f0" }}>{row.name}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.id}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.dept}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.job}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.group}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.shouldDays}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.realDays}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.lateMins}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.lateCount}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.earlyMins}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.earlyCount}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function RecordTable({ data, onEdit, onDelete }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  if (isMobile) {
    return (
      <div style={{ 
        display: "flex", 
        flexDirection: "column",
        gap: 16
      }}>
        {data.map((row, idx) => (
          <div
            key={idx}
            style={{
              background: "#fff",
              border: "1px solid #f0f0f0",
              borderRadius: 8,
              padding: "16px 20px",
            }}
          >
            <div style={{
              display: "flex",
              flexDirection: "column",
              gap: 12
            }}>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8
              }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: "#1f2329" }}>
                  {row.name}
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>员工号:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.id}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>部门:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.dept}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8,
                marginTop: 4
              }}>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>日期:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.date}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>星期:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.week}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>上班打卡时间:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.checkIn}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>上班打卡结果:</span>
                  <span style={{ 
                    color: row.checkInStatus === "正常" ? "#00b42a" : "#f53f3f", 
                    fontSize: 14,
                    background: row.checkInStatus === "正常" ? "#e8ffea" : "#fff0f0",
                    padding: "2px 8px",
                    borderRadius: 4
                  }}>{row.checkInStatus}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>下班打卡时间:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.checkOut}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>下班打卡结果:</span>
                  <span style={{ 
                    color: row.checkOutStatus === "正常" ? "#00b42a" : "#f53f3f", 
                    fontSize: 14,
                    background: row.checkOutStatus === "正常" ? "#e8ffea" : "#fff0f0",
                    padding: "2px 8px",
                    borderRadius: 4
                  }}>{row.checkOutStatus}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>下班:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.shift}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                gap: 8,
                marginTop: 8,
                borderTop: "1px solid #f0f0f0",
                paddingTop: 12
              }}>
                <button
                  onClick={() => onEdit(idx)}
                  style={{
                    color: "#1f2329",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  编辑
                </button>
                <button
                  onClick={() => onDelete(idx)}
                  style={{
                    color: "#f53f3f",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  删除
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <table
      style={{
        width: "100%",
        borderCollapse: "collapse",
        background: "#fff",
        fontSize: 14,
      }}
    >
      <thead>
        <tr style={{ background: "#f7f8fa", height: 40 }}>
          {recordColumns.map((col) => (
            <th
              key={col}
              style={{ border: "1px solid #f0f0f0", fontWeight: 500 }}
            >
              {col}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, idx) => (
          <tr
            key={idx}
            style={{
              textAlign: "center",
              height: 40,
              background: idx % 2 === 1 ? "#f7f8fa" : "#fff",
            }}
          >
            <td style={{ border: "1px solid #f0f0f0" }}>{row.name}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.id}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.dept}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.date}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.week}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.checkIn}</td>
            <td
              style={{
                border: "1px solid #f0f0f0",
                color: row.checkInStatus === "异常" ? "#faad14" : undefined,
              }}
            >
              {row.checkInStatus}
            </td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.checkOut}</td>
            <td
              style={{
                border: "1px solid #f0f0f0",
                color: row.checkOutStatus === "异常" ? "#faad14" : undefined,
              }}
            >
              {row.checkOutStatus}
            </td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.shift}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>
              <span
                style={{ color: "#1890ff", cursor: "pointer", marginRight: 8 }}
                onClick={() => onEdit(idx)}
              >
                修改
              </span>
              <span
                style={{ color: "#1890ff", cursor: "pointer" }}
                onClick={() => onDelete(idx)}
              >
                删除
              </span>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function ScheduleTable({ data }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  if (isMobile) {
    return (
      <div style={{ 
        display: "flex", 
        flexDirection: "column",
        gap: 16
      }}>
        {data.map((row, idx) => (
          <div
            key={idx}
            style={{
              background: "#fff",
              border: "1px solid #f0f0f0",
              borderRadius: 8,
              padding: "16px 20px",
            }}
          >
            <div style={{
              display: "flex",
              flexDirection: "column",
              gap: 12
            }}>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8
              }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: "#1f2329" }}>
                  {row.name}
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>员工号:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.id}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>部门:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.dept}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8,
                marginTop: 4
              }}>
                {Array.from({ length: 10 }).map((_, d) => {
                  const val = row[`d${d + 1}`];
                  const isRest = val === "休息";
                  const week = ["六", "日", "一", "二", "三", "四", "五", "六", "日", "一"][d];
                  return (
                    <div key={d} style={{ display: "flex", gap: 8, alignItems: "center" }}>
                      <span style={{ color: "#86909c", fontSize: 14 }}>{`${week}${d + 1}:`}</span>
                      <span style={{ 
                        color: isRest ? "#fff" : "#fff",
                        fontSize: 14,
                        background: isRest ? "#bfc3c9" : "#ff9100",
                        padding: "2px 8px",
                        borderRadius: 4,
                        fontWeight: 500
                      }}>{val}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <table
      style={{
        width: "100%",
        borderCollapse: "collapse",
        background: "#fff",
        fontSize: 14,
      }}
    >
      <thead>
        <tr style={{ background: "#f7f8fa", height: 40 }}>
          {scheduleColumns.map((col) => (
            <th
              key={col}
              style={{ border: "1px solid #f0f0f0", fontWeight: 500 }}
            >
              {col}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, idx) => (
          <tr
            key={idx}
            style={{
              textAlign: "center",
              height: 40,
              background: idx % 2 === 1 ? "#f7f8fa" : "#fff",
            }}
          >
            <td style={{ border: "1px solid #f0f0f0" }}>{row.name}</td>
            <td
              style={{
                border: "1px solid #f0f0f0",
                color: "#1890ff",
                cursor: "pointer",
              }}
            >
              {row.id}
            </td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.dept}</td>
            {Array.from({ length: 10 }).map((_, d) => {
              const val = row[`d${d + 1}`];
              const isRest = val === "休息";
              return (
                <td
                  key={d}
                  style={{
                    border: "1px solid #f0f0f0",
                    background: isRest ? "#bfc3c9" : "#ff9100",
                    color: isRest ? "#fff" : "#fff",
                    fontWeight: 500,
                  }}
                >
                  {val}
                </td>
              );
            })}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function LeaveTable({ data, onView, onSet }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  if (isMobile) {
    return (
      <div style={{ 
        display: "flex", 
        flexDirection: "column",
        gap: 16
      }}>
        {data.map((row, idx) => (
          <div
            key={idx}
            style={{
              background: "#fff",
              border: "1px solid #f0f0f0",
              borderRadius: 8,
              padding: "16px 20px",
            }}
          >
            <div style={{
              display: "flex",
              flexDirection: "column",
              gap: 12
            }}>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8
              }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: "#1f2329" }}>
                  {row.name}
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>手机号:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.phone}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>部门:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.dept}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>年度:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.year}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8,
                marginTop: 4
              }}>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>剩余年假:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.annual}天</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>剩余司龄假:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.seniority}天</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>剩余带薪病假:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.sick}天</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>剩余婚假:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.marriage}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>剩余产假:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.maternity}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>剩余丧假:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.funeral}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                gap: 8,
                marginTop: 8,
                borderTop: "1px solid #f0f0f0",
                paddingTop: 12
              }}>
                <button
                  onClick={() => onView(idx)}
                  style={{
                    color: "#1f2329",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  查看
                </button>
                <button
                  onClick={() => onSet(idx)}
                  style={{
                    color: "#1f2329",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  设置
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <table
      style={{
        width: "100%",
        borderCollapse: "collapse",
        background: "#fff",
        fontSize: 14,
      }}
    >
      <thead>
        <tr style={{ background: "#f7f8fa", height: 40 }}>
          {leaveColumns.map((col) => (
            <th
              key={col}
              style={{ border: "1px solid #f0f0f0", fontWeight: 500 }}
            >
              {col}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, idx) => (
          <tr
            key={idx}
            style={{
              textAlign: "center",
              height: 40,
              background: idx % 2 === 1 ? "#f7f8fa" : "#fff",
            }}
          >
            <td style={{ border: "1px solid #f0f0f0" }}>{row.name}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.phone}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.dept}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.year}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.annual}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.seniority}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.sick}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.marriage}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.maternity}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.funeral}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>
              <span
                style={{ color: "#1890ff", cursor: "pointer", marginRight: 8 }}
                onClick={() => onView(idx)}
              >
                查看
              </span>
              <span
                style={{ color: "#1890ff", cursor: "pointer" }}
                onClick={() => onSet(idx)}
              >
                设置
              </span>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function HolidayTable({ data, onDetail, onApprove }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  if (isMobile) {
    return (
      <div style={{ 
        display: "flex", 
        flexDirection: "column",
        gap: 16
      }}>
        {data.map((row, idx) => (
          <div
            key={idx}
            style={{
              background: "#fff",
              border: "1px solid #f0f0f0",
              borderRadius: 8,
              padding: "16px 20px",
            }}
          >
            <div style={{
              display: "flex",
              flexDirection: "column",
              gap: 12
            }}>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8
              }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: "#1f2329" }}>
                  {row.name}
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>手机号:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.phone}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>部门:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.dept}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>发起人:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.sponsor}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8,
                marginTop: 4
              }}>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>假期类型:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.type}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>请假时长:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.duration}天</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>开始时间:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.start}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>结束时间:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.end}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>请假事由:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.reason}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>审批:</span>
                  <span style={{ 
                    color: "#00b42a", 
                    fontSize: 14,
                    background: "#e8ffea",
                    padding: "2px 8px",
                    borderRadius: 4
                  }}>{row.status}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                gap: 8,
                marginTop: 8,
                borderTop: "1px solid #f0f0f0",
                paddingTop: 12
              }}>
                <button
                  onClick={() => onDetail(idx)}
                  style={{
                    color: "#1f2329",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  详情
                </button>
                <button
                  onClick={() => onApprove(idx)}
                  style={{
                    color: "#1f2329",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  审批
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <table
      style={{
        width: "100%",
        borderCollapse: "collapse",
        background: "#fff",
        fontSize: 14,
      }}
    >
      <thead>
        <tr style={{ background: "#f7f8fa", height: 40 }}>
          {holidayColumns.map((col) => (
            <th
              key={col}
              style={{ border: "1px solid #f0f0f0", fontWeight: 500 }}
            >
              {col}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, idx) => (
          <tr
            key={idx}
            style={{
              textAlign: "center",
              height: 40,
              background: idx % 2 === 1 ? "#f7f8fa" : "#fff",
            }}
          >
            <td style={{ border: "1px solid #f0f0f0" }}>{row.name}</td>
            <td
              style={{
                border: "1px solid #f0f0f0",
                color: "#1890ff",
                cursor: "pointer",
              }}
            >
              {row.phone}
            </td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.dept}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.sponsor}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.type}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.duration}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.start}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.end}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.reason}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.status}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>
              <span
                style={{ color: "#1890ff", cursor: "pointer", marginRight: 8 }}
                onClick={() => onDetail(idx)}
              >
                详情
              </span>
              <span
                style={{ color: "#1890ff", cursor: "pointer" }}
                onClick={() => onApprove(idx)}
              >
                审批
              </span>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function TypeTable({ data, onEdit, onDisable, onDelete }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  if (isMobile) {
    return (
      <div style={{ 
        display: "flex", 
        flexDirection: "column",
        gap: 16
      }}>
        {data.map((row, idx) => (
          <div
            key={idx}
            style={{
              background: "#fff",
              border: "1px solid #f0f0f0",
              borderRadius: 8,
              padding: "16px 20px",
            }}
          >
            <div style={{
              display: "flex",
              flexDirection: "column",
              gap: 12
            }}>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8
              }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: "#1f2329" }}>
                  {row.type}
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>休假单位:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.unit}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>休假额度:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.limit}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>适用范围:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.scope}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>是否带薪:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.paid}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>负责人:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.owner}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                gap: 8,
                marginTop: 8,
                borderTop: "1px solid #f0f0f0",
                paddingTop: 12
              }}>
                <button
                  onClick={() => onEdit(idx)}
                  style={{
                    color: "#1f2329",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  编辑
                </button>
                <button
                  onClick={() => onDisable(idx)}
                  style={{
                    color: "#1f2329",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  停用
                </button>
                <button
                  onClick={() => onDelete(idx)}
                  style={{
                    color: "#f53f3f",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  删除
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <table
      style={{
        width: "100%",
        borderCollapse: "collapse",
        background: "#fff",
        fontSize: 14,
      }}
    >
      <thead>
        <tr style={{ background: "#f7f8fa", height: 40 }}>
          {typeColumns.map((col) => (
            <th
              key={col}
              style={{ border: "1px solid #f0f0f0", fontWeight: 500 }}
            >
              {col}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, idx) => (
          <tr
            key={idx}
            style={{
              textAlign: "center",
              height: 40,
              background: idx % 2 === 1 ? "#f7f8fa" : "#fff",
            }}
          >
            <td
              style={{
                border: "1px solid #f0f0f0",
                color: "#bfbfbf",
                fontSize: 18,
                fontWeight: 700,
              }}
            >
              <span style={{ cursor: "move", userSelect: "none" }}>⋮⋮</span>
            </td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.type}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.unit}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.limit}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.scope}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.paid}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.owner}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>
              <span
                style={{ color: "#1890ff", cursor: "pointer", marginRight: 8 }}
                onClick={() => onEdit(idx)}
              >
                编辑
              </span>
              <span
                style={{ color: "#1890ff", cursor: "pointer", marginRight: 8 }}
                onClick={() => onDisable(idx)}
              >
                停用
              </span>
              <span
                style={{ color: "#1890ff", cursor: "pointer" }}
                onClick={() => onDelete(idx)}
              >
                删除
              </span>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function OvertimeTable({ data, onDetail, onApprove }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  if (isMobile) {
    return (
      <div style={{ 
        display: "flex", 
        flexDirection: "column",
        gap: 16
      }}>
        {data.map((row, idx) => (
          <div
            key={idx}
            style={{
              background: "#fff",
              border: "1px solid #f0f0f0",
              borderRadius: 8,
              padding: "16px 20px",
            }}
          >
            <div style={{
              display: "flex",
              flexDirection: "column",
              gap: 12
            }}>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8
              }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: "#1f2329" }}>
                  {row.name}
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>手机号:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.phone}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>部门:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.dept}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>发起人:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.sponsor}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8,
                marginTop: 4
              }}>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>加班日期:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.date}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>申请时长:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.duration}小时</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>开始时间:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.start}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>结束时间:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.end}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>加班类型:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.type}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>补偿方式:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.compensation}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                gap: 8,
                marginTop: 8,
                borderTop: "1px solid #f0f0f0",
                paddingTop: 12
              }}>
                <button
                  onClick={() => onDetail(idx)}
                  style={{
                    color: "#1f2329",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  详情
                </button>
                <button
                  onClick={() => onApprove(idx)}
                  style={{
                    color: "#1f2329",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  审批
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <table
      style={{
        width: "100%",
        borderCollapse: "collapse",
        background: "#fff",
        fontSize: 14,
      }}
    >
      <thead>
        <tr style={{ background: "#f7f8fa", height: 40 }}>
          {overtimeColumns.map((col) => (
            <th
              key={col}
              style={{ border: "1px solid #f0f0f0", fontWeight: 500 }}
            >
              {col}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, idx) => (
          <tr
            key={idx}
            style={{
              textAlign: "center",
              height: 40,
              background: idx % 2 === 1 ? "#f7f8fa" : "#fff",
            }}
          >
            <td style={{ border: "1px solid #f0f0f0" }}>{row.name}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.phone}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.dept}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.sponsor}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.date}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.duration}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.start}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.end}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.type}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.compensation}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>
              <span
                style={{ color: "#1890ff", cursor: "pointer", marginRight: 8 }}
                onClick={() => onDetail(idx)}
              >
                详情
              </span>
              <span
                style={{ color: "#1890ff", cursor: "pointer" }}
                onClick={() => onApprove(idx)}
              >
                审批
              </span>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function ShiftTable({ data, onEdit, onCopy, onDelete }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  if (isMobile) {
    return (
      <div style={{ 
        display: "flex", 
        flexDirection: "column",
        gap: 16
      }}>
        {data.map((row, idx) => (
          <div
            key={idx}
            style={{
              background: "#fff",
              border: "1px solid #f0f0f0",
              borderRadius: 8,
              padding: "16px 20px",
            }}
          >
            <div style={{
              display: "flex",
              flexDirection: "column",
              gap: 12
            }}>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8
              }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: "#1f2329" }}>
                  {row.name}
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>班次名称:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.name}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>考勤时间:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.times.join(" ~ ")}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>出勤时长:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.duration}小时</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>创建人:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.creator}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>创建时间:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.createTime}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                gap: 8,
                marginTop: 8,
                borderTop: "1px solid #f0f0f0",
                paddingTop: 12
              }}>
                <button
                  onClick={() => onEdit(idx)}
                  style={{
                    color: "#1f2329",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  编辑
                </button>
                <button
                  onClick={() => onCopy(idx)}
                  style={{
                    color: "#1f2329",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  复制
                </button>
                <button
                  onClick={() => onDelete(idx)}
                  style={{
                    color: "#f53f3f",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  删除
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <table
      style={{
        width: "100%",
        borderCollapse: "collapse",
        background: "#fff",
        fontSize: 14,
      }}
    >
      <thead>
        <tr style={{ background: "#f7f8fa", height: 40 }}>
          {shiftColumns.map((col) => (
            <th
              key={col}
              style={{ border: "1px solid #f0f0f0", fontWeight: 500 }}
            >
              {col}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, idx) => (
          <tr
            key={idx}
            style={{
              textAlign: "center",
              height: 40,
              background: idx % 2 === 1 ? "#f7f8fa" : "#fff",
            }}
          >
            <td style={{ border: "1px solid #f0f0f0" }}>{row.name}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.name}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.times.join(" ~ ")}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.duration}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.creator}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.createTime}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>
              <span
                style={{ color: "#1890ff", cursor: "pointer", marginRight: 8 }}
                onClick={() => onEdit(idx)}
              >
                编辑
              </span>
              <span
                style={{ color: "#1890ff", cursor: "pointer", marginRight: 8 }}
                onClick={() => onCopy(idx)}
              >
                复制
              </span>
              <span
                style={{ color: "#1890ff", cursor: "pointer" }}
                onClick={() => onDelete(idx)}
              >
                删除
              </span>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function LocationTable({ data, onEdit, onDelete }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);

  React.useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  if (isMobile) {
    return (
      <div style={{ 
        display: "flex", 
        flexDirection: "column",
        gap: 16
      }}>
        {data.map((row, idx) => (
          <div
            key={idx}
            style={{
              background: "#fff",
              border: "1px solid #f0f0f0",
              borderRadius: 8,
              padding: "16px 20px",
            }}
          >
            <div style={{
              display: "flex",
              flexDirection: "column",
              gap: 12
            }}>
              <div style={{
                display: "flex",
                flexDirection: "column",
                gap: 8
              }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: "#1f2329" }}>
                  {row.name}
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>考勤地点名称:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.name}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>考勤方式:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.type}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>GPS打卡地点:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.gps}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>GPS有效范围:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.range}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>打卡Wi-Fi名称:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.wifi}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>MAC地址:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.mac}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>创建人:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.creator}</span>
                </div>
                <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ color: "#86909c", fontSize: 14 }}>创建时间:</span>
                  <span style={{ color: "#1f2329", fontSize: 14 }}>{row.create}</span>
                </div>
              </div>
              <div style={{
                display: "flex",
                gap: 8,
                marginTop: 8,
                borderTop: "1px solid #f0f0f0",
                paddingTop: 12
              }}>
                <button
                  onClick={() => onEdit(idx)}
                  style={{
                    color: "#1f2329",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  编辑
                </button>
                <button
                  onClick={() => onDelete(idx)}
                  style={{
                    color: "#f53f3f",
                    fontSize: 14,
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer"
                  }}
                >
                  删除
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <table
      style={{
        width: "100%",
        borderCollapse: "collapse",
        background: "#fff",
        fontSize: 14,
      }}
    >
      <thead>
        <tr style={{ background: "#f7f8fa", height: 40 }}>
          {locationColumns.map((col) => (
            <th
              key={col}
              style={{ border: "1px solid #f0f0f0", fontWeight: 500 }}
            >
              {col}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, idx) => (
          <tr
            key={idx}
            style={{
              textAlign: "center",
              height: 40,
              background: idx % 2 === 1 ? "#f7f8fa" : "#fff",
            }}
          >
            <td style={{ border: "1px solid #f0f0f0" }}>{row.name}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.type}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.gps}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.range}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.wifi}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.mac}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.creator}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>{row.create}</td>
            <td style={{ border: "1px solid #f0f0f0" }}>
              <span
                style={{ color: "#1890ff", cursor: "pointer", marginRight: 8 }}
                onClick={() => onEdit(idx)}
              >
                编辑
              </span>
              <span
                style={{ color: "#1890ff", cursor: "pointer" }}
                onClick={() => onDelete(idx)}
              >
                删除
              </span>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function Pagination({ total, pageSize, current, onChange, onPageSizeChange }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  React.useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const totalPages = Math.max(1, Math.ceil(total / pageSize));

  // 修正版分页逻辑
  function getPages(current, totalPages) {
    if (totalPages <= 7) {
      return Array.from({ length: totalPages }, (_, i) => i + 1);
    }
    const pages = [];
    pages.push(1);
    if (current <= 4) {
      for (let i = 2; i <= 5; i++) pages.push(i);
      pages.push('...');
    } else if (current >= totalPages - 3) {
      pages.push('...');
      for (let i = totalPages - 4; i < totalPages; i++) pages.push(i);
    } else {
      pages.push('...');
      for (let i = current - 1; i <= current + 1; i++) pages.push(i);
      pages.push('...');
    }
    pages.push(totalPages);
    // 去重并保证顺序
    return pages.filter((v, i, arr) => i === 0 || v !== arr[i - 1]);
  }
  const pages = getPages(current, totalPages);

  // 样式彻底优化，防止横向滚动
  const wrapStyle = isMobile
    ? { overflowX: 'auto', maxWidth: '100vw', marginTop: 8, background: '#fff', borderRadius: 8, boxSizing: 'border-box', padding: '4px 0' }
    : { marginTop: 16, justifyContent: 'flex-end' };
  const barStyle = isMobile
    ? { display: 'flex', alignItems: 'center', gap: 2, minHeight: 32, flexWrap: 'nowrap' }
    : { display: 'flex', alignItems: 'center', gap: 8, minHeight: 40 };
  const btnStyle = (active, disabled) => ({
    height: isMobile ? 26 : 32,
    border: active ? '1.5px solid #203a64' : '1px solid #e5e6eb',
    background: active ? '#203a64' : '#fff',
    color: active ? '#fff' : '#203a64',
    borderRadius: 4,
    fontWeight: 500,
    fontSize: isMobile ? 13 : 15,
    cursor: disabled ? 'not-allowed' : 'pointer',
    opacity: disabled ? 0.4 : 1,
    outline: 'none',
    transition: 'all 0.2s',
    padding: isMobile ? '0 6px' : '0 10px',
    boxSizing: 'border-box',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    touchAction: 'manipulation',
    flexShrink: 0,
    margin: 0,
  });
  const selectStyle = {
    height: isMobile ? 26 : 32,
    border: '1px solid #e5e6eb',
    borderRadius: 4,
    fontSize: isMobile ? 13 : 15,
    color: '#203a64',
    padding: isMobile ? '0 4px' : '0 8px',
    marginLeft: 2,
    background: '#fff',
    outline: 'none',
    flexShrink: 0,
    width: 'auto',
    minWidth: 0,
  };

  return (
    <div style={{ display: 'flex', ...wrapStyle }}>
      <div style={barStyle}>
        <button
          style={btnStyle(false, current === 1)}
          disabled={current === 1}
          onClick={() => current > 1 && onChange(current - 1)}
        >
          {'<'}
        </button>
        {pages.map((p, i) =>
          p === '...'
            ? <span key={'ellipsis-' + i} style={{ textAlign: 'center', color: '#86909c', fontSize: isMobile ? 12 : 15, flexShrink: 0, padding: isMobile ? '0 2px' : '0 4px' }}>...</span>
            : <button
                key={p + '-' + i}
                style={btnStyle(p === current, false)}
                onClick={() => p !== current && onChange(p)}
              >{p}</button>
        )}
        <button
          style={btnStyle(false, current === totalPages)}
          disabled={current === totalPages}
          onClick={() => current < totalPages && onChange(current + 1)}
        >
          {'>'}
        </button>
        <select
          value={pageSize}
          onChange={e => onPageSizeChange(Number(e.target.value))}
          style={selectStyle}
        >
          {[5, 10, 20, 50, 100].map(size => (
            <option key={size} value={size}>{size}/page</option>
          ))}
        </select>
      </div>
    </div>
  );
}

function Content({ activeMenu }) {
  const [page, setPage] = React.useState(1);
  const [pageSize, setPageSize] = React.useState(10);

  // 日报
  const total = mockData.length;
  const pageData = React.useMemo(() => {
    const start = (page - 1) * pageSize;
    return mockData.slice(start, start + pageSize);
  }, [page, pageSize]);

  // 月报
  const monthTotal = monthData.length;
  const monthPageData = React.useMemo(() => {
    const start = (page - 1) * pageSize;
    return monthData.slice(start, start + pageSize);
  }, [page, pageSize]);

  // 出勤记录
  const recordTotal = recordData.length;
  const recordPageData = React.useMemo(() => {
    const start = (page - 1) * pageSize;
    return recordData.slice(start, start + pageSize);
  }, [page, pageSize]);

  // 假期余额
  const leaveTotal = leaveData.length;
  const leavePageData = React.useMemo(() => {
    const start = (page - 1) * pageSize;
    return leaveData.slice(start, start + pageSize);
  }, [page, pageSize]);

  // 休假记录
  const holidayTotal = holidayData.length;
  const holidayPageData = React.useMemo(() => {
    const start = (page - 1) * pageSize;
    return holidayData.slice(start, start + pageSize);
  }, [page, pageSize]);

  // 假期类型
  const typeTotal = typeData100.length;
  const typePageData = React.useMemo(() => {
    const start = (page - 1) * pageSize;
    return typeData100.slice(start, start + pageSize);
  }, [page, pageSize]);

  // 加班记录
  const overtimeTotal = overtimeData.length;
  const overtimePageData = React.useMemo(() => {
    const start = (page - 1) * pageSize;
    return overtimeData.slice(start, start + pageSize);
  }, [page, pageSize]);

  // 班次设置
  const shiftTotal = shiftData100.length;
  const shiftPageData = React.useMemo(() => {
    const start = (page - 1) * pageSize;
    return shiftData100.slice(start, start + pageSize);
  }, [page, pageSize]);

  // 考勤地点设置
  const locationTotal = locationData100.length;
  const locationPageData = React.useMemo(() => {
    const start = (page - 1) * pageSize;
    return locationData100.slice(start, start + pageSize);
  }, [page, pageSize]);

  if (activeMenu === "考勤日报") {
    return (
      <div
        style={{
          background: "#fff",
          borderRadius: 8,
          minHeight: 600,
          boxShadow: "0 2px 8px #f0f1f2",
          padding: 24,
        }}
      >
        <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>
          考勤日报
        </h2>
        {/* 表格区 */}
        <div
          style={{
            border: "1px solid #f0f0f0",
            borderRadius: 6,
            overflow: "hidden",
          }}
        >
          <Table data={pageData} />
        </div>
        {/* 分页区 */}
        <Pagination
          total={total}
          pageSize={pageSize}
          current={page}
          onChange={(p) => setPage(p)}
          onPageSizeChange={(size) => {
            setPageSize(size);
            setPage(1);
          }}
        />
      </div>
    );
  }

  if (activeMenu === "出勤记录") {
    return (
      <div
        style={{
          background: "#fff",
          borderRadius: 8,
          minHeight: 600,
          boxShadow: "0 2px 8px #f0f1f2",
          padding: 24,
        }}
      >
        <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>
          出勤记录
        </h2>
        {/* 表格区 */}
        <div
          style={{
            border: "1px solid #f0f0f0",
            borderRadius: 6,
            overflow: "hidden",
          }}
        >
          <RecordTable
            data={recordPageData}
            onEdit={() => {}}
            onDelete={() => {}}
          />
        </div>
        {/* 分页区 */}
        <Pagination
          total={recordTotal}
          pageSize={pageSize}
          current={page}
          onChange={(p) => setPage(p)}
          onPageSizeChange={(size) => {
            setPageSize(size);
            setPage(1);
          }}
        />
      </div>
    );
  }

  if (activeMenu === "考勤月报") {
    return (
      <div
        style={{
          background: "#fff",
          borderRadius: 8,
          minHeight: 600,
          boxShadow: "0 2px 8px #f0f1f2",
          padding: 24,
        }}
      >
        <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>
          考勤月报
        </h2>
        {/* 表格区 */}
        <div
          style={{
            border: "1px solid #f0f0f0",
            borderRadius: 6,
            overflow: "hidden",
          }}
        >
          <MonthTable data={monthPageData} />
        </div>
        {/* 分页区 */}
        <Pagination
          total={monthTotal}
          pageSize={pageSize}
          current={page}
          onChange={(p) => setPage(p)}
          onPageSizeChange={(size) => {
            setPageSize(size);
            setPage(1);
          }}
        />
      </div>
    );
  }

  if (activeMenu === "假期余额") {
    return (
      <div
        style={{
          background: "#fff",
          borderRadius: 8,
          minHeight: 600,
          boxShadow: "0 2px 8px #f0f1f2",
          padding: 24,
        }}
      >
        <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>
          假期余额
        </h2>
        {/* 表格区 */}
        <div
          style={{
            border: "1px solid #f0f0f0",
            borderRadius: 6,
            overflow: "hidden",
          }}
        >
          <LeaveTable data={leavePageData} onView={() => {}} onSet={() => {}} />
        </div>
        {/* 分页区 */}
        <Pagination
          total={leaveTotal}
          pageSize={pageSize}
          current={page}
          onChange={(p) => setPage(p)}
          onPageSizeChange={(size) => {
            setPageSize(size);
            setPage(1);
          }}
        />
      </div>
    );
  }

  if (activeMenu === "休假记录") {
    return (
      <div
        style={{
          background: "#fff",
          borderRadius: 8,
          minHeight: 600,
          boxShadow: "0 2px 8px #f0f1f2",
          padding: 24,
        }}
      >
        <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>
          休假记录
        </h2>
        {/* 表格区 */}
        <div
          style={{
            border: "1px solid #f0f0f0",
            borderRadius: 6,
            overflow: "hidden",
          }}
        >
          <HolidayTable
            data={holidayPageData}
            onDetail={() => {}}
            onApprove={() => {}}
          />
        </div>
        {/* 分页区 */}
        <Pagination
          total={holidayTotal}
          pageSize={pageSize}
          current={page}
          onChange={(p) => setPage(p)}
          onPageSizeChange={(size) => {
            setPageSize(size);
            setPage(1);
          }}
        />
      </div>
    );
  }

  if (activeMenu === "假期类型") {
    return (
      <div
        style={{
          background: "#fff",
          borderRadius: 8,
          minHeight: 600,
          boxShadow: "0 2px 8px #f0f1f2",
          padding: 24,
        }}
      >
        <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>
          假期类型
        </h2>
        {/* 表格区 */}
        <div
          style={{
            border: "1px solid #f0f0f0",
            borderRadius: 6,
            overflow: "hidden",
          }}
        >
          <TypeTable
            data={typePageData}
            onEdit={() => {}}
            onDisable={() => {}}
            onDelete={() => {}}
          />
        </div>
        {/* 分页区 */}
        <Pagination
          total={typeTotal}
          pageSize={pageSize}
          current={page}
          onChange={(p) => setPage(p)}
          onPageSizeChange={(size) => {
            setPageSize(size);
            setPage(1);
          }}
        />
      </div>
    );
  }

  if (activeMenu === "加班记录") {
    return (
      <div
        style={{
          background: "#fff",
          borderRadius: 8,
          minHeight: 600,
          boxShadow: "0 2px 8px #f0f1f2",
          padding: 24,
        }}
      >
        <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>
          加班记录
        </h2>
        {/* 表格区 */}
        <div
          style={{
            border: "1px solid #f0f0f0",
            borderRadius: 6,
            overflow: "hidden",
          }}
        >
          <OvertimeTable
            data={overtimePageData}
            onDetail={() => {}}
            onApprove={() => {}}
          />
        </div>
        {/* 分页区 */}
        <Pagination
          total={overtimeTotal}
          pageSize={pageSize}
          current={page}
          onChange={(p) => setPage(p)}
          onPageSizeChange={(size) => {
            setPageSize(size);
            setPage(1);
          }}
        />
      </div>
    );
  }

  if (activeMenu === "班次设置") {
    return (
      <div
        style={{
          background: "#fff",
          borderRadius: 8,
          minHeight: 600,
          boxShadow: "0 2px 8px #f0f1f2",
          padding: "24px 16px",
          overflow: "auto",
        }}
      >
        <div style={{ 
          display: "flex", 
          justifyContent: "space-between", 
          alignItems: "center",
          marginBottom: 16,
          flexWrap: "wrap",
          gap: 16
        }}>
          <h2 style={{ fontSize: 18, fontWeight: 600, margin: 0 }}>
            班次设置
          </h2>
          <button
            style={{
              background: "#1890ff",
              color: "#fff",
              border: "none",
              padding: "8px 16px",
              borderRadius: 6,
              cursor: "pointer",
              fontSize: 14,
              display: "flex",
              alignItems: "center",
              gap: 8
            }}
            onClick={() => {}}
          >
            <span style={{
              display: "inline-block",
              width: 14,
              height: 14,
              background: "#fff",
              borderRadius: 7,
              opacity: 0.8
            }} />
            新建班次
          </button>
        </div>
        {/* 表格区 */}
        <div
          style={{
            border: "1px solid #f0f0f0",
            borderRadius: 6,
            overflow: "auto",
          }}
        >
          <ShiftTable
            data={shiftPageData}
            onEdit={() => {}}
            onCopy={() => {}}
            onDelete={() => {}}
          />
        </div>
        {/* 分页区 */}
        <Pagination
          total={shiftTotal}
          pageSize={pageSize}
          current={page}
          onChange={(p) => setPage(p)}
          onPageSizeChange={(size) => {
            setPageSize(size);
            setPage(1);
          }}
        />
      </div>
    );
  }

  if (activeMenu === "考勤地点设置") {
    return (
      <div
        style={{
          background: "#fff",
          borderRadius: 8,
          minHeight: 600,
          boxShadow: "0 2px 8px #f0f1f2",
          padding: 24,
        }}
      >
        <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>
          考勤地点设置
        </h2>
        {/* 表格区 */}
        <div
          style={{
            border: "1px solid #f0f0f0",
            borderRadius: 6,
            overflow: "hidden",
          }}
        >
          <LocationTable
            data={locationPageData}
            onEdit={() => {}}
            onDelete={() => {}}
          />
        </div>
        {/* 分页区 */}
        <Pagination
          total={locationTotal}
          pageSize={pageSize}
          current={page}
          onChange={(p) => setPage(p)}
          onPageSizeChange={(size) => {
            setPageSize(size);
            setPage(1);
          }}
        />
      </div>
    );
  }

  if (activeMenu !== "考勤日报") {
    return (
      <div
        style={{
          background: "#fff",
          borderRadius: 8,
          minHeight: 600,
          boxShadow: "0 2px 8px #f0f1f2",
        }}
      >
        <h2 style={{ padding: 24, borderBottom: "1px solid #eee" }}>
          {activeMenu}
        </h2>
        <div style={{ padding: 24 }}>{activeMenu}内容区（待实现）</div>
      </div>
    );
  }

  return (
    <div
      style={{
        background: "#fff",
        borderRadius: 8,
        minHeight: 600,
        boxShadow: "0 2px 8px #f0f1f2",
        padding: 24,
      }}
    >
      <h2 style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>
        考勤日报
      </h2>
      {/* 表格区 */}
      <div
        style={{
          border: "1px solid #f0f0f0",
          borderRadius: 6,
          overflow: "hidden",
        }}
      >
        <Table data={pageData} />
      </div>
      {/* 分页区 */}
      <Pagination
        total={total}
        pageSize={pageSize}
        current={page}
        onChange={(p) => setPage(p)}
        onPageSizeChange={(size) => {
          setPageSize(size);
          setPage(1);
        }}
      />
    </div>
  );
}

export default Content;

 